<script setup>
import { ref, onMounted } from "vue";
import NewEraYouthDialog from "../center/components/NewEraYouthDialog.vue";
import { useRouter } from "vue-router";
import { aiZhxy_info } from "@/api/shool";

const router = useRouter();
const EraYVisible = ref(false);
const aiZhxyData = ref({});
const getAiZhxy_info = async () => {
  const res = await aiZhxy_info();
  if (res.code == 200) {
    aiZhxyData.value = res.data;
  }
};
const sdxrClick = () => {
  router.push("/employmentServices");
};
const goxyczg = () => {
  window.open(
    `http://23.210.227.34:23343/yitu/#/chart/publishShort/ub8adgxyyv400`,
    "_blank"
  );
};
onMounted(() => {
  getAiZhxy_info();
});
</script>

<template>
  <div class="right">
    <div class="title bg1">
      <img
        src="../../../assets/images/detail.png"
        class="detailArrow"
        @click="EraYVisible = true"
      />
    </div>
    <div class="box">
      <div class="box-c">
        <div class="box-c-c1" @click="sdxrClick">
          <img src="../../../assets/images/city.png" class="icon1" />
          <span>市级-大学生毕业就业AI服务</span>
          <img src="../../../assets/images/aiBtn.png" class="icon2" />
        </div>
        <div class="box-c-c2">
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">高校毕业生人数</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">45512</span>
              <span class="box-c-c2-c-c2-c2">人</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow1.png" class="arrow pos1" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">高校毕业意向压力指数</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">7.5</span>
              <span class="box-c-c2-c-c2-c2"></span>
            </div>
          </div>
          <img src="../../../assets/images/arrow1.png" class="arrow pos2" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">毕业生去向落实占比</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">79</span>
              <span class="box-c-c2-c-c2-c2">%</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow1.png" class="arrow pos3" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">整改报告</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">45</span>
              <span class="box-c-c2-c-c2-c2">份</span>
            </div>
          </div>
        </div>
      </div>

      <div class="box-c box-bg op">
        <div class="box-c-c1">
          <img src="../../../assets/images/city.png" class="icon1" />
          <span>学生健康服务</span>
          <img src="../../../assets/images/aiBtn.png" class="icon2" />
        </div>
        <div class="box-c-c2">
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1" title="儿童青少年哨点监测近视率"
              >儿童青少年哨点监测近视率</span
            >
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">95%</span>
              <!-- <span class="box-c-c2-c-c2-c2">万人</span> -->
            </div>
          </div>
          <img src="../../../assets/images/arrow1.png" class="arrow pos1" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1" title="儿童青少年近视管控试点数"
              >儿童青少年近视管控试点数</span
            >
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">695</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow1.png" class="arrow pos2" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1" title="中小学近视人数同比下降"
              >中小学近视人数同比下降</span
            >
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">2.9%</span>
              <!-- <span class="box-c-c2-c-c2-c2">万人</span> -->
            </div>
          </div>
          <img src="../../../assets/images/arrow1.png" class="arrow pos3" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1" title="儿童青少年近视预防指导文件数"
              >儿童青少年近视预防指导文件数</span
            >
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">14</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
        </div>
      </div>

      <div class="box-c op">
        <div class="box-c-c1">
          <img src="../../../assets/images/county.png" class="icon1" />
          <span>中小学研学实践管理</span>
          <img src="../../../assets/images/aiBtn.png" class="icon2" />
        </div>
        <div class="box-c-c2">
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">学校研学活动开展率</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">100%</span>
              <!-- <span class="box-c-c2-c-c2-c2">万人</span> -->
            </div>
          </div>
          <img src="../../../assets/images/arrow2.png" class="arrow pos1" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">研学活动学生参与率</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">100%</span>
              <!-- <span class="box-c-c2-c-c2-c2">个</span> -->
            </div>
          </div>
          <img src="../../../assets/images/arrow2.png" class="arrow pos2" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">研学活动已审批</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">188</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow2.png" class="arrow pos3" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">研学基地停业</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">2</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
        </div>
      </div>

      <div class="box-c box-bg op">
        <div class="box-c-c1">
          <img src="../../../assets/images/school.png" class="icon1" />
          <span>高校教育AI一表通</span>
          <!-- <img src="../../../assets/images/aiBtn.png" class="icon2" /> -->
        </div>
        <div class="box-c-c2">
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">入驻办理项</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">260</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow3.png" class="arrow pos1" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">教师刻板事项</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">244</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow3.png" class="arrow pos2" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">学生可办事项</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">106</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow3.png" class="arrow pos3" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1" title="全市学生平均运动时长同比上涨"
              >进驻服务部门</span
            >
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">22</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="title bg2">
      <img src="../../../assets/images/detail.png" class="detailArrow" />
    </div>
    <div class="box">
      <div class="box-c box-bg">
        <div class="box-c-c1" @click="goxyczg">
          <img src="../../../assets/images/county.png" class="icon1" />
          <span>两江新区-校园餐智管</span>
          <img src="../../../assets/images/aiBtn.png" class="icon2" />
        </div>
        <div class="box-c-c2">
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1" title=""
              >食材加工监管品目数</span
            >
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">{{
                aiZhxyData?.foodCategoryNum
              }}</span>
              <span class="box-c-c2-c-c2-c2">类</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow1.png" class="arrow pos1" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1" title=""
              >食材当日验收合格率</span
            >
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">{{
                aiZhxyData?.qualifiedRate
              }}</span>
              <span class="box-c-c2-c-c2-c2">%</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow1.png" class="arrow pos2" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1" title="学校食堂上月整体满意度"
              >学校食堂上月整体满意度</span
            >
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">{{
                aiZhxyData?.satisfaction
              }}</span>
              <span class="box-c-c2-c-c2-c2">%</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow1.png" class="arrow pos3" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">风险问题整改情况</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">{{ aiZhxyData?.riskNum }}</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
        </div>
      </div>
      <div class="box-c op">
        <div class="box-c-c1">
          <img src="../../../assets/images/city.png" class="icon1" />
          <span>学校规划布点</span>
          <img src="../../../assets/images/aiBtn.png" class="icon2" />
        </div>
        <div class="box-c-c2">
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">小学</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">5334</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow1.png" class="arrow pos1" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">重庆市教育事业重要规划</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">7</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow1.png" class="arrow pos2" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">中小学生均校舍面积</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">15</span>
              <span class="box-c-c2-c-c2-c2">㎡‌</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow1.png" class="arrow pos3" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">市级智慧学校建设示范学校</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">550</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
        </div>
      </div>
      <div class="box-c op">
        <div class="box-c-c1">
          <img src="../../../assets/images/county.png" class="icon1" />
          <span>学校危化试剂智慧管理</span>
          <img src="../../../assets/images/aiBtn.png" class="icon2" />
        </div>
        <div class="box-c-c2">
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">一物一码追溯率</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">100%</span>
              <!-- <span class="box-c-c2-c-c2-c2">万人</span> -->
            </div>
          </div>
          <img src="../../../assets/images/arrow2.png" class="arrow pos1" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">易制毒入库试剂种类</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">7</span>
              <span class="box-c-c2-c-c2-c2">种</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow2.png" class="arrow pos2" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">学校巡检次数</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">1505</span>
              <span class="box-c-c2-c-c2-c2">次</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow2.png" class="arrow pos3" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">应急事件</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">44</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>
        </div>
      </div>

      <div class="box-c box-bg op">
        <div class="box-c-c1">
          <img src="../../../assets/images/school.png" class="icon1" />
          <span>教师在线备课</span>
          <img src="../../../assets/images/aiBtn.png" class="icon2" />
        </div>
        <div class="box-c-c2">
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">教师备课资源总数</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">518988</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div>
          </div>

          <img src="../../../assets/images/arrow3.png" class="arrow pos2" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">在线资源评估率</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">100%</span>
              <!-- <span class="box-c-c2-c-c2-c2">万次</span> -->
            </div>
          </div>
          <img src="../../../assets/images/arrow3.png" class="arrow pos3" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1">在线资源使用总人次</span>
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">--</span>
              <span class="box-c-c2-c-c2-c2">万次</span>
            </div>
          </div>
          <img src="../../../assets/images/arrow3.png" class="arrow pos1" />
          <div class="box-c-c2-c">
            <span class="box-c-c2-c-c1" title="优质在线备课资源数"
              >优质在线备课资源数</span
            >
            <div class="box-c-c2-c-l"></div>
            <div class="box-c-c2-c-c2">
              <span class="box-c-c2-c-c2-c1">--</span>
              <span class="box-c-c2-c-c2-c2">个</span>
            </div> 
          </div>
        </div>
      </div>
    </div>
    <NewEraYouthDialog
      :visible="EraYVisible"
      title="学生成长"
      @close="EraYVisible = false"
    ></NewEraYouthDialog>
  </div>
</template>

<style lang="less" scoped>
.right {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  .title {
    width: 100%;
    height: 2.75rem;
    display: flex;
    align-items: center;
    position: relative;
    .detailArrow {
      width: 21px;
      height: 18px;
      position: absolute;
      right: 12px;
      cursor: pointer;
    }
  }
  .bg1 {
    background: url(../../../assets/images/title1.png) no-repeat;
    background-size: 100% 100%;
  }
  .bg2 {
    background: url("../../../assets/images/title2.png") no-repeat;
    background-size: 100% 100%;
  }

  .box {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    .box-c {
      width: 100%;
      flex: 1;
      background: rgba(9, 54, 100, 0.5);
      padding: 8px 12px 0;
      display: flex;
      flex-direction: column;
      // justify-content: center;
      gap: 6px;
      .box-c-c1 {
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: "Alibaba PuHuiTi 2.0-85 Bold";
        font-size: 16px;
        color: #c9e9f8;
        cursor: pointer;
      }
      .box-c-c2 {
        display: flex;
        gap: 29px;
        position: relative;
        .box-c-c2-c {
          min-width: 108px;
          display: flex;
          flex-direction: column;
          gap: 8px;
          .box-c-c2-c-c1 {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-family: "Alibaba PuHuiTi 2.0-65 Medium";
            font-size: 12px;
            color: #c9e9f8;
            line-height: 12px;
          }
          .box-c-c2-c-l {
            width: 60px;
            border-radius: 0px 0px 0px 0px;
            border: 1px solid;
            border-image: linear-gradient(
                90deg,
                rgba(201, 233, 248, 0.4),
                rgba(201, 233, 248, 0)
              )
              1 1;
          }
          .box-c-c2-c-c2 {
            // display: flex;
            // align-items: end;
            // gap: 2px;
            .box-c-c2-c-c2-c1 {
              font-family: "Helvetica-Bold";
              font-weight: bold;
              font-size: 20px;
              color: #ffffff;
              line-height: 20px;
            }
            .box-c-c2-c-c2-c2 {
              font-family: "Alibaba PuHuiTi 2.0-55 Regular";
              font-size: 10px;
              color: rgba(201, 233, 248, 0.8);
              margin-left: 2px;
            }
          }
        }
      }
    }
  }
  .box-bg {
    background: rgba(9, 54, 100, 0) !important;
  }
  .op {
    opacity: 0.6;
  }

  .pos1 {
    position: absolute;
    left: 93px;
    top: 10px;
  }
  .pos2 {
    position: absolute;
    left: 230px;
    top: 10px;
  }
  .pos3 {
    position: absolute;
    left: 367px;
    top: 10px;
  }
  .arrow {
    width: 44px;
    height: 28px;
  }

  .icon1 {
    width: 20px;
    height: 20px;
  }
  .icon2 {
    width: 36px;
    height: 18px;
  }
}
</style>
